<template>
  <div>
    <el-card>
      <!-- class="project-list-container" -->
      <div>
        <div class="list-h">
          <div class="add-option"></div>
          <el-form
            :inline="true"
            class="demo-form-inline"
            :model="formInline"
            ref="formRef"
            @submit.prevent
          >
            <el-form-item label="项目名称" prop="projectNameLike">
              <el-input
                v-model.trim="formInline.projectNameLike"
                clearable
                class="width-custom120"
              ></el-input>
            </el-form-item>
            <el-form-item label="项目编号" prop="projectCodeLike">
              <el-input
                v-model.trim="formInline.projectCodeLike"
                clearable
                class="width-custom120"
              ></el-input>
            </el-form-item>
            <el-form-item label="创建人" prop="createUserNameLike">
              <el-input
                v-model.trim="formInline.createUserNameLike"
                clearable
                class="width-custom120"
              ></el-input>
            </el-form-item>
            <el-form-item label="项目类型" prop="projectTypeCode">
              <el-select
                v-model="formInline.projectTypeCode"
                filterable
                class="width-custom120"
              >
                <el-option
                  v-for="item in projectTypeArr"
                  :key="item.dicCode"
                  :label="item.dicValue"
                  :value="item.dicCode"
                ></el-option>
              </el-select>
            </el-form-item>
            <!-- <el-form-item label="审批状态" prop="flowStatus">
              <el-select
                v-model="formInline.flowStatus"
                clearable
                class="width-custom120"
              >
                <el-option
                  v-for="item in flowStatusArr"
                  :key="item.dicCode"
                  :label="item.dicValue"
                  :value="item.dicCode"
                ></el-option>
              </el-select>
            </el-form-item> -->
            <el-form-item>
              <el-button @click="handleReset">重置</el-button>
              <el-button type="primary" @click="handleSearch">查询</el-button>
            </el-form-item>
          </el-form>
        </div>

        <el-skeleton style="height: 50vh" :rows="8" :loading="loading" animated>
          <el-table
            :data="tableData"
            border
            style="width: 100%"
            v-loading="loading"
            :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
          >
            <template #empty>
              <el-empty :image-size="150" description="暂无数据"></el-empty>
            </template>
            <el-table-column type="index" label="序号" width="60">
              <template v-slot="scope">
                <span>{{
                  (formInline.pageNum - 1) * formInline.pageSize +
                  scope.$index +
                  1
                }}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="projectCode"
              label="项目编号"
              width="170"
            ></el-table-column>
            <el-table-column
              prop="projectName"
              label="项目名称"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              width="80"
              prop="projectTypeName"
              label="项目类型"
            ></el-table-column>

            <el-table-column
              prop="createUserName"
              label="创建人"
            ></el-table-column>
            <el-table-column
              prop="createTime"
              label="创建时间"
              width="140"
            ></el-table-column>
            <el-table-column label="项目阶段">
              <template #default="{ row }">
                {{ stages[+row.stageStatus] }}
              </template>
            </el-table-column>
            <el-table-column prop="" label="审批状态">
              <template #default="{ row }">
                {{ formatterStatusType(row) }}
                <!-- <a
                  style="color: #f89c34"
                  v-if="
                    row.projectApproveStatus === '4' ||
                    row.projectApproveStatus === '8'
                  "
                  @click="alertMsg(row)"
                  >驳回原因</a
                > -->
              </template>
            </el-table-column>
            <!-- <el-table-column label="当前审批节点" :min-width="100">
              <template #default="{ row }">{{
                row.nodeStatusYsName || "信息填报"
              }}</template>
            </el-table-column>
            <el-table-column
              prop="curHandleYsUserName"
              label="当前处理人"
              width="120"
            ></el-table-column> -->

            <el-table-column label="操作" fixed="right">
              <template #default="{ row }">
                <!-- <el-button
                  type="text"
                  v-if="
                    row.stageApproveStatus === '2' &&
                    row.canProcess === 1 &&
                    row.stageStatus === '2'
                  "
                  @click="handleEdit(row, 'approval')"
                  >审核</el-button
                > -->
                <el-button
                  v-if="
                    !(
                      row.stageStatus === '4' &&
                      +row.saveStatus < 4 &&
                      row.stageApproveStatus !== '2' &&
                      row.canProcess !== 1
                    )
                  "
                  type="text"
                  @click="handleEdit(row, 'look')"
                  >查看</el-button
                >
                <el-button v-else type="text" @click="handleEdit(row, 'edit')"
                  >编辑验收信息</el-button
                >
                <!-- <el-button
                  type="text"
                  @click="handleEdit(row, 'approval')"
                  v-if="
                    row.isHandler === 1 &&
                    (row.curNodeId || row.nodeStatusYsCode) != 'end'
                  "
                  >审批</el-button
                > -->
              </template>
            </el-table-column>
          </el-table>
        </el-skeleton>
      </div>
      <re-pagination
        :total="total"
        v-show="total > 0"
        v-model:page="formInline.pageNum"
        v-model:limit="formInline.pageSize"
        @pagination="handleSearch"
      />
    </el-card>
  </div>
</template>

<script lang="ts">
import { reactive, toRefs, ref, defineComponent } from "vue";
import { postProjectList } from "/@/api/project";
import { postDictList } from "/@/api/common";
// import NotifMessage from "/@/utils/message/notification";
import { useRouter } from "vue-router";
import { ProjectStatusMap2 } from "../types";
import { ElMessageBox } from "element-plus";

export default defineComponent({
  name: "UserManage",

  setup() {
    const router = useRouter();
    const formRef = ref<HTMLFormElement | null>(null) as any;
    let loading = ref<boolean>(false);
    let projectStep = ref<Array<any>>([]);
    let total = ref<number>(0);
    let formInline = reactive<any>({
      projectNameLike: "",
      projectCodeLike: "",
      createUserNameLike: "",
      projectTypeCode: "",
      flowStatus: "",
      stageStatusUpper: "4",
      pageSize: 10,
      pageNum: 1,
      isFilings: "1"
    });

    let state = reactive({
      stages: ["建档 ", "可研", "立项", "实施", "验收", "后评价", "项目已结束"],
      tableData: [],
      companyInfo: {}
    });

    let projectTypeArr = ref([]);
    let flowStatusArr = ref([]);

    // 请求公司列表表格数据
    async function getTableData(obj: object = {}) {
      // 真实请求待添加
      loading.value = true;
      try {
        const { code, data } = await postProjectList(obj);
        if (code === 200) {
          state.tableData = data.list;
          total.value = data.rows;
        }
      } catch (err) {
        console.log(err);
      } finally {
        loading.value = false;
      }
    }

    const initProjectTypeList = async () => {
      try {
        const params = {
          dicType: "rd_project_type"
        };
        const { code, data } = await postDictList(params);
        if (code === 200) {
          projectTypeArr.value = data;
        }
      } catch (err) {
        console.log(err);
      }
    };
    // 审批状态
    const initFlowStatusList = async () => {
      try {
        const params = {
          dicType: "rd_flow_status"
        };
        const { code, data } = await postDictList(params);
        if (code === 200) {
          flowStatusArr.value = data;
        }
      } catch (err) {
        console.log(err);
      }
    };
    const alertMsg = row => {
      ElMessageBox.alert(row.ext9, "驳回信息");
    };

    // 清除表单，重置
    const handleReset = () => {
      formRef.value.resetFields();
    };

    // 根据条件进行搜索
    const handleSearch = (): void => {
      getTableData(formInline);
    };

    // 项目详情,查看，编辑，审批
    const handleEdit = (row, type): void => {
      router.push({
        path: "/project/check/detail",
        query: {
          id: row.id,
          flowId: row.flowId,
          taskId: row.curTaskId,
          instanceId: row.instanceId,
          nodeId:
            row.nodeStatusYsCode && row.nodeStatusYsCode.toLocaleUpperCase(),
          isSkipYs: row.isSkipYs,
          mode: type
        }
      });
    };
    const formatterStatusType = row => {
      if (!row.projectApproveStatus) {
        row.projectApproveStatus = "1";
      }
      if (row.stageStatus === "6") {
        return "已审核";
      } else {
        return ProjectStatusMap2.get(row.projectApproveStatus);
      }
    };

    const initProjectStageList = async () => {
      try {
        const params = {
          dicType: "rd_project_stage"
        };
        const { code, data } = await postDictList(params);
        if (code === 200) {
          projectStep.value = data;

          // projectStage.value = projectStep.value.map(el => el.dicCode);
        }
      } catch (err) {
        console.log(err);
      }
    };

    const getProjectStage = row => {
      const projectStage = JSON.parse(row.projectStage);
      let str = "";
      projectStage.forEach(el => {
        const target = projectStep.value.find(obj => el === obj.dicCode);
        if (target) {
          str += target.dicValue + " ";
        }
      });
      return str;
    };

    // 请求数据
    initProjectStageList();
    getTableData(formInline);
    initProjectTypeList();
    initFlowStatusList();
    return {
      projectStep,
      getProjectStage,
      projectTypeArr,
      flowStatusArr,
      loading,
      formInline,
      formRef,
      total,
      ...toRefs(state),
      handleReset,
      handleSearch,
      handleEdit,
      formatterStatusType,
      alertMsg
    };
  }
});
</script>
